<template>
    <el-form class="container-fluid" label-width="0px" :model="formInline">
        <el-form-item class="row" :style="{ height: '42px' }">
            <el-input class="input m-mr-4" clearable v-model.lazy="formInline.name" placeholder="输入题单名或ID搜索"></el-input>
        </el-form-item>
        <el-form-item :style="{ height: '42px' }">
            <el-button-group size="default" v-if="!isAdmin" v-model="formInline.usertype">
                <el-button :type="formInline.usertype === 'public' ? 'primary' : ''" value="public"
                    @click="formInline.usertype = 'public'">公开题单
                </el-button>
                <el-button :type="formInline.usertype === 'team' ? 'primary' : ''" value="team"
                    @click="formInline.usertype = 'team'">团队题单
                </el-button>
                <el-button :type="formInline.usertype === 'user' ? 'primary' : ''" value="user"
                    @click="formInline.usertype = 'user'">我的题单
                </el-button>
            </el-button-group>
        </el-form-item>

        <div class="row">
            <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">编号</div>
            <div class="col" :style="{ height: '42px', lineHeight: '42px' }">名称</div>
            <div :style="{ width: '50px', padding: 0, height: '42px', lineHeight: '42px' }"></div>
            <div :style="{ width: '90px', padding: 0, height: '42px', lineHeight: '42px' }">添加到题单</div>
        </div>
        <hr :style="{ marginTop: '6px', marginBottom: '6px' }" />
        <div class="mydata">
            <el-scrollbar>
                <div class="row list" v-for="v in getquestion" :key="v.ID"
                    :style="{ marginTop: '6px', marginBottom: '6px' }">
                    <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">{{ v.ID }}</div>
                    <div class="col text-truncate" :style="{ height: '42px', lineHeight: '42px' }">{{ v.name
                        }} <span :style="{ fontSize: '12px', color: '#888' }">{{ }}</span>
                    </div>
                    <el-link :href="`https://oj.hterobot.com/#/questionbank/${v.ID}?istest=0`" target="_blank"
                        class="router-link-q">
                        预览
                    </el-link>
                    <div class="text-center" :style="{ width: '90px', padding: 0, height: '42px', lineHeight: '42px' }">
                        <span class="cu" :style="{
                            width: '24px',
                            height: '24px',
                            background: 'var(--color-cheng)',
                            borderRadius: '2px',
                            display: 'inline-block',
                            lineHeight: '24px',
                        }" @click="add(v)">
                            <el-icon color="#fff" size="18px" :style="{
                                transform: 'translateY(3px)'
                            }">
                                <Plus />
                            </el-icon>
                        </span>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div class="row">
            <div class="col text-right">
                <el-pagination class="" :page-size="limit" :total="getquestioncount" @current-change="currentchange"
                    layout="total,prev, pager, next"
                    :current-page="Math.floor(Number(formInline._offset) / limit) + 1"></el-pagination>
            </div>
        </div>
    </el-form>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { debounce } from 'underscore';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { Iobj, asyncgetquestionbank } from '../../../api';
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

const limit = 13

const getquestion = computed(() => {
    return store.state.questionbank?.rows || []
})


const p = defineProps<{ addclick: Function, _include?: { [key in keyof Studycodemodel.Iquestion]: any }, teamid?: number, isAdmin?: boolean }>()


const formInline = reactive<Iobj<Studycodemodel.Iquestionbank>>({
    teamid: [],
    name: "",
    label: "",
    _offset: 0,
    usertype: p.isAdmin ? undefined : "public"
})



watch(formInline, () => {
    debouncet1.value()
})

const store = useStore(Storekey)

const getquestioncount = computed(() => {
    return store.state.questionbank?.count || 0
})

function currentchange(r: number) {
    formInline._offset = (r - 1) * limit
}

const getteam = computed(() => {
    return store.state.team?.rows || []
})

const loading = ref(false)

async function add(v: Studycodemodel.Iquestionbank) {
    const questionbank = await asyncgetquestionbank({ ID: Number(v.ID) })
    if (questionbank) {
        const question = questionbank.questionquestionbank?.map(e => e.question)
        if (question) {
            question.forEach(t => p.addclick(t))
        }
    }
}

const debouncet1 = ref(debouncet())
function debouncet() {
    return debounce(async () => {
        const { name, teamid, _offset } = formInline;
        const obj: Iobj<Studycodemodel.Iquestionbank> = {
            _order: "ID",
            _offset,
            _limit: limit,
        };
        let _like: [keyof Studycodemodel.Iquestionbank, any]
        if (name) {
            _like = ["name", formInline.name];
            const id = Number(name);
            if (id == name) {
                _like = ["ID", id];
            }
            obj._like = _like;
        }
        let t;
        if (formInline.usertype == "team") {
            t = teamid.length ? teamid : getteam.value?.map((v) => v.ID);
            obj.teamid = t;
            obj.usertype = formInline.usertype
            if (p.teamid) {
                obj.teamid = p.teamid
            }

        } else if (formInline.usertype == "user") {
            obj.userid = [store.state.user?.ID]
            obj.usertype = [formInline.usertype, 'team']
        }
        if (p._include) {
            Object.assign(obj, {
                _include: {
                    ...(obj._include || {}),
                    ...p._include
                }
            })
        }
        loading.value = true;
        await store.dispatch("actionquestionbank", obj);
        loading.value = false;
    }, 300);
}




onMounted(() => {
    debouncet1.value()
})

</script>



<style scoped>
.container-fluid {
    padding: 0;
    height: 846px;
}


.mydata {
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.input {
    display: inline-block;
}

.col-center div {
    width: 90px;
}

.icon-class-var {
    display: none;
}

.list {
    padding-bottom: 6px;
    width: 100%;
}

.list:hover {
    color: var(--color-cheng);
    background-color: #f8f8f8;
}

.list:hover .icon-class-var {
    display: inline-block;
}

.row {
    transition: all 0.4s;
}
</style>